<template>

    <div>

        <h2>短信推送</h2>

        <div class="container">
            <div>
                <div style="margin-bottom: 20px;">
                    <el-button type="default" @click="add">添加新推送</el-button>
                </div>
            </div>
            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        prop="templet_id"
                        label="模板ID"
                >
                </el-table-column>
                <el-table-column
                        prop="object_name"
                        label="发送对象"
                >
                </el-table-column>
                <el-table-column
                        prop="status_name"
                        label="发送状态"
                >
                </el-table-column>
                <el-table-column
                        prop="send_date"
                        label="发送时间"
                >
                </el-table-column>
                <el-table-column
                        label="操作" width="180"
                >
                    <template slot-scope="scope">
                        <el-button size="mini" v-if="scope.row.status==0" @click="startSend(scope.row.id)">马上推送</el-button>
                        <el-button size="mini" v-if="scope.row.status==2"  @click="remove(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    ref="mainPage"
                    background
                    class="pagination"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="params.limit"
                    @current-change="setPage"
                    @prev-click="setPage"
                    @next-click="setPage"
            >
            </el-pagination>

        </div>

        <el-dialog
                title="推送"
                :visible.sync="dialogVisible"
                width="50%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="160px">

                <el-form-item label="短信模板">
                    <el-input size="small" v-model="form.templet_id"></el-input>
                </el-form-item>
                <el-form-item label="推送对象">
                    <el-select size="small" v-model="form.object" placeholder="请选择">
                        <el-option key="all" value="all" label="全部用户"></el-option>
                        <el-option key="order" value="order" label="订单未支付用户"></el-option>
                        <el-option key="coupon" value="coupon" label="优惠券即将到期用户"></el-option>
                        <el-option key="recharge" value="recharge" label="套餐即将完成用户"></el-option>
                        <el-option key="collect" value="collect" label="指定用户"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户电话" v-if="form.object=='collect'">
                    <el-input type="textarea" v-model="form.collect"></el-input>
                </el-form-item>
                <el-form-item label="推送时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                                        value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间"
                                        value-format="HH:mm:ss" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
            </el-form>
            <div style="text-align: center">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</template>
<script>

    export default {
        data() {
            return {
                items: [],
                loading: true,
                params: {
                    limit: 10,
                    offset: 0,
                    datetime: []
                },
                currentPage: 1,
                total: 0,
                dialogVisible: false,
                form:{
                    device:'all'
                }
            }
        },
        created() {
            this.fetch();
        },
        methods: {
            fetch() {
                axios.get('/admin/api/sms/message', {params: this.params}).then((res) => {
                    console.log(res)
                    if (res.data.code === 0) {
                        this.items = res.data.data.data;
                        this.total = res.data.data.total;
                    } else {
                        this.$message(res.data.msg);
                    }
                    this.loading = false;
                }).catch(function() {
                    this.$message('系统错误');
                    this.loading = false;
                })
            },

            disable() {

            },

            enable() {

            },

            // 切换分页
            setPage: function(page) {
                this.currentPage = page;
                this.params.offset = (page - 1) * this.params.limit;
                this.fetch()
            },
            // 重新请求接口获取数据，参数发生了变化，页码重置为1
            reload: function() {
                if (this.currentPage === 1) {
                    this.fetch();
                } else {
                    this.setPage(1);
                }
            },
            startSend(messageId) {
                axios.post('/admin/api/push/message/send', {id:messageId}).then((res) => {
                    if (res.data.code === 0) {
                        this.fetch();
                    } else {
                        this.$message(res.data.msg);
                    }
                    this.loading = false;
                }).catch((err) => {
                    this.$message('系统错误');
                    this.loading = false;
                })
            },
            add(){
                this.dialogVisible = true;
            },
            save(){
                axios.post('/admin/api/sms/message/add', this.form).then((res) => {
                    if (res.data.code === 0) {
                        this.dialogVisible = false;
                        this.fetch();
                    } else {
                        this.$message(res.data.msg);
                    }
                    this.loading = false;
                }).catch((err) => {
                    this.$message('系统错误');
                    this.loading = false;
                })
            },
            remove(id){
                axios.post('/admin/api/sms/message/delete', {id:id}).then((res) => {
                    if (res.data.code === 0) {
                        this.fetch();
                    } else {
                        this.$message(res.data.msg);
                    }
                    this.loading = false;
                }).catch((err) => {
                    this.$message('系统错误');
                    this.loading = false;
                })
            }
        }
    }
</script>